import React from 'react';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
import BannerAnim, { Element } from 'rc-banner-anim';
import TweenOne from 'rc-tween-one';
import QueueAnim from 'rc-queue-anim';
import 'rc-banner-anim/assets/index.css';

class Teams extends React.PureComponent {
  render() {
    return (
      <div className="home-page-wrapper teams0-wrapper">
        <OverPack className="home-page teams0" playScale={0.3}>
          <TweenOne
            key="wrapper"
            animation={{
              y: '+=30',
              opacity: 0,
              type: 'from',
              ease: 'easeOutQuad',
            }}
            resetStyle
            component=""
          >
            <BannerAnim
              type="across"
              arrow={false}
              dragPlay={false}
              className="banner-anim"
            >
              <Element
                key="0"
                className="teams0-banner-user-elem"
                prefixCls="teams0-banner-user-elem"
              >
                <QueueAnim
                  type={['bottom', 'top']}
                  delay={200}
                  key="text"
                  className="teams0-content-wrapper"
                >
                  <div
                    key="0"
                    className="teams0-image"
                  >
                    <img src="/images/A_njqxS5Ky7CQAAAAAAAAAAABjARQnAQ.png" alt="img" />
                  </div>
                  <div
                    key="1"
                    className="teams0-content"
                  >
                    SEE = Seeking Experience & Engineering，意为探索用户体验与工程实践，由蚂蚁金服集团每年举办 1-2 次，包括专业分享、产品展台、Workshop 等内容。
                  </div>
                  <h1
                    key="2"
                    className="teams0-h1"
                  >
                    韩勇
                  </h1>
                  <div
                    key="3"
                    className="teams0-content"
                  >
                    公司+职位 信息暂缺
                  </div>
                </QueueAnim>
              </Element>
              <Element
                key="1"
                className="teams0-banner-user-elem"
                prefixCls="teams0-banner-user-elem"
              >
                <QueueAnim
                  type={['bottom', 'top']}
                  delay={200}
                  key="text"
                  className="teams0-content-wrapper"
                >
                  <div
                    key="0"
                    className="teams0-image"
                  >
                    <img src="/images/A_--rVR4hclJYAAAAAAAAAAABjARQnAQ.png" alt="img" />
                  </div>
                  <div
                    key="1"
                    className="teams0-content"
                  >
                    SEE = Seeking Experience & Engineering，意为探索用户体验与工程实践，由蚂蚁金服集团每年举办 1-2 次，包括专业分享、产品展台、Workshop 等内容。
                  </div>
                  <h1
                    key="2"
                    className="teams0-h1"
                  >
                    叶秀英
                  </h1>
                  <div
                    key="3"
                    className="teams0-content"
                  >
                    公司+职位 信息暂缺
                  </div>
                </QueueAnim>
              </Element>
            </BannerAnim>
          </TweenOne>
        </OverPack>
      </div>
    );
  }
}

export default Teams;
